<template>
  <div class="walletLogin" :class="{ 'tronLoginClass': $appName === 'tronNewdex' }">
    <!-- 主链选择 登录 -->
    <div class="chainbox">
      <el-dropdown trigger="click" @command="handleCheckChain" class="changeChain">
        <div class="el-dropdown-link chain-link">
          <img :src="chainLogo(chainValue)" alt="">
          <span class="fontColor">{{chainValue}} <i v-if="chainOptions.length > 1"
          class="el-icon-arrow-down el-icon--right"></i></span>
        </div>
        <el-dropdown-menu slot="dropdown" :hidden="chainOptions.length <= 1">
          <el-dropdown-item :command="item.value"
          v-for="(item, index) in chainOptions" :key="index">
            <div class="optionChain">
              <img style="background: #fff;border-radius: 50%;"
                :src="chainLogo(item.value)" alt="">
              <span class="fontColor">{{item.label}}</span>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="wlainbox flex">
      <div class="wlleft">
        <!-- Scatter授权 -->
        <div class="scatterbox">
          <p class="loginCaption">{{ $t('wallet.desktopWalletLogin') }}</p>
          <div class="scatterlogo flexc">
            <img src="@/assets/img/mainIndex/computer.png?v=1.1" alt="">
          </div>
          <el-button @click="handleScatterPower"
          v-loading="scatterLoginLoading"
          class="default-sty btnbig"
          style="width: 200px;">
            <!-- {{ $t('nav.permission', {wallet: chainValue === 'ENU' || chainValue === 'FIBOS' ? 'Ironman' : 'Scatter'}) }} -->
            {{ $t('wallet.promistLogin') }}
          </el-button>
          <!-- 未安装插件 -->
          <div style="height: 43px; margin-bottom: 5px;">
            <div v-if="wlstatus === -1 && chainValue !== 'ENU' && chainValue !== 'FIBOS'">
              <p class="color-red">{{$t('wallet.desp1')}}</p>
              <p style="margin-top: 5px;"><a target="_blank"
              :href="hrefDesktopWallet[$store.state.app.language]" class="colorThis">{{$t('wallet.desp2')}}</a></p>
            </div>
            <div v-if="wlstatus === -1 && (chainValue === 'ENU' || chainValue === 'FIBOS')">
              <p class="color-red">{{$t('public.ironmanTip')}}</p>
              <p style="margin-top: 5px;">
                <a target="_blank" v-if="this.whatUserAgent === 70"
                href="https://addons.mozilla.org/zh-CN/firefox/addon/enu-ironman/" class="colorThis">
                  {{$t('public.walletTip')}}
                </a>
                <a target="_blank" v-else
                href="https://chrome.google.com/webstore/detail/ironman/janbppjcbfhklbggcgkpiefmondofolo" class="colorThis">
                  {{$t('public.walletTip')}}
                </a>
              </p>
            </div>
          </div>
          <div class="supportList flexc">
            <template v-for="(item, index) in walletsPlugList">
              <el-tooltip :key="index"
              placement="bottom" effect="light">
                <div slot="content" style="text-align: center">
                  <a :href="item.download" class="colorThis center" style="display: block; margin-bottom: 5px;" target="_blank">
                    {{$t('wallet.download')}} {{ item.name }}
                  </a>
                  <a :href="item.helpCenter[$store.state.app.language]" class="center colorThis" style="display: block;" target="_blank">
                    {{ $t('public.tutorial') }}
                  </a>
                </div>
                <div class="supportListImg">
                  <img :src="item.logo" alt="">
                </div>
              </el-tooltip>
            </template>
          </div>
          <div class="tilist" style="padding: 12px 0 0 38px" v-if="chainValue === 'ENU' || chainValue === 'FIBOS'">
            <p><i></i> {{$t('wallet.scatuse3')}}
            <a target="_blank"
              :href="resetHelpCenter[$store.state.app.language]"
              class="colorThis">
              {{$t('public.whatIronman')}}
              </a>
            </p>
          </div>
          <div class="tilist" style="padding: 12px 0 0 38px" v-else>
            <p><i></i> {{$t('wallet.scatuse2')}}
            <a target="_blank"
              :href="hrefTronDesktopWallet[$store.state.app.language]"
              class="colorThis"
              v-if="$appName === 'tronNewdex'">
              {{$t('public.whatDesktop')}}
              </a>
            <a target="_blank"
              :href="hrefDesktopWallet[$store.state.app.language]"
              class="colorThis"
              v-else>
              {{$t('public.whatDesktop')}}
              </a>
            </p>
            <p v-if="chainValue !== 'EOS' && $appName === 'eosNewdex'">
              <i></i>
              <a target="_blank" class="colorThis"
              :href="resetHelpCenter[$store.state.app.language]">
                {{$t('bosChain.configure', {chain: chainValue})}}
              </a>
            </p>
          </div>
        </div>
      </div>
      <template v-if="$appName === 'eosNewdex'">
        <!-- wax 云钱包登录 -->
        <template v-if="chainValue === 'WAX'">
          <div class="wlright">
            <div class="scatterbox center">
              <p class="loginCaption">{{ $t('public.waxTip1') }}</p>
              <div class="scatterlogo flexc" style="width: 155px;">
                <img src="@/assets/img/mainIndex/wax.png?v=1.1" alt="">
              </div>
              <el-button @click="handleCloudWallet"
              class="default-sty btnbig"
              style="width: 240px;">
              {{ $t('public.waxTip2') }}
              </el-button>
            </div>
          </div>
        </template>
        <div v-else>
          <div class="wlright">
            <!-- 选择 Scatter 安装方式 -->
            <div class="scatteranz" v-if="wlstatus === -111111" style="padding-left: 10px;">
              <h2 style="margin: 0">{{$t('jy.anz')}} Scatter</h2>
              <p style="margin-top: 5px; text-align: center; font-size: 14px;">{{$t('wallet.scataz')}}</p>
              <div style="width: 300px; margin: auto">
                <el-button class="default-sty defaultno" @click="handleToScatter(1)"
                style="width: 300px; margin: 15px 0 20px">{{$t('wallet.tizi')}}</el-button>
                <el-button class="default-sty" @click="handleToScatter(0)"
                v-if="$store.state.app.language === 'zh-CN'"
                style="width: 300px;">{{$t('wallet.notizi')}}</el-button>
              </div>
              <span class="ansuces" @click="handleResh" v-if="clickTrue">{{$t('wallet.ansuccess')}}</span>
            </div>
            <!-- 手机钱包列表 -->
            <div class="walletList">
              <!-- 钱包登录二维码 -->
              <div class="walletCode">
                <p class="fontcolor3" style="padding: 0; margin-bottom: 5px;">{{$t('wallet.phoneLogin')}}</p>
                <div class="codebox" v-loading="loadingCode">
                  <!-- 侧链不支持扫码蒙版 -->
                  <div class="payMask flexc" v-if="chainValue !== 'EOS'">
                    <div class="center">
                      <p>{{chainValue}}{{$t('bosChain.bosAccount')}}</p>
                      <p>{{$t('bosChain.dontCode')}}</p>
                    </div>
                  </div>
                  <canvas id="loginCode"></canvas>
                  <div class="overdueCode flexc" v-if="overdueCode">
                    <span>{{$t('wallet.codeover')}}
                    <a @click="handleNewLoginCode">{{$t('wallet.shuaxin')}}</a></span>
                  </div>
                </div>
              </div>
              <div class="wlistbox flex">
                <!-- <template v-if="chainValue === 'FIBOS'">
                  <el-tooltip placement="bottom" effect="light">
                    <div slot="content" style="text-align: center">
                      <p style="padding-bottom: 5px">{{`${$t('wallet.banben')} ${foWallet.version}`}}</p>
                      <a :href="foWallet.download" class="colorThis" target="_blank">{{$t('wallet.download')}} {{$t(`wallet.${foWallet.name}`)}}</a>
                    </div>
                    <div class="walletitem">
                      <img :src="foWallet.logo" alt="">
                    </div>
                  </el-tooltip>
                </template> -->
                <template v-for="(item, index) in wallets">
                  <el-tooltip v-if="item.status" :key="index"
                  placement="bottom" effect="light">
                    <div slot="content" style="text-align: center">
                      <p style="padding-bottom: 5px">{{`${$t('wallet.banben')} ${item.version}`}}</p>
                      <a :href="item.download" class="colorThis" target="_blank">{{$t('wallet.download')}} {{$t(`wallet.${item.name}`)}}</a>
                    </div>
                    <div class="walletitem">
                      <img :src="item.logo" alt="">
                    </div>
                  </el-tooltip>
                </template>
              </div>
              <p class="fontcolor9 center" style="margin-top: 8px">
                {{$t('wallet.vnews')}}<el-tooltip placement="top" effect="light">
                  <div slot="content" style="text-align: center">
                    <template v-if="chainValue === 'FIBOS'">
                      <p v-if="foWallet.status" style="padding: 5px; text-align: left">
                        <span class="fontcolor3"
                        style="display: inline-block; color: #333 !important; width: 80px; font-weight: bold;">
                        {{$t(`wallet.${foWallet.name}`)}}</span>
                        {{`${$t('wallet.banben')} ${foWallet.version}`}}
                      </p>
                    </template>
                    <template v-for="(item, index) in wallets" v-else>
                      <p v-if="item.status" :key="index" style="padding: 5px; text-align: left">
                        <span class="fontcolor3"
                        style="display: inline-block; color: #333 !important; width: 80px; font-weight: bold;">{{$t(`wallet.${item.name}`)}}</span>
                        {{`${$t('wallet.banben')} ${item.version}`}}
                      </p>
                    </template>
                  </div>
                  <span class="colorThis">{{$t('wallet.version')}}</span>
                </el-tooltip>
              </p>
            </div>
          </div>
          <!-- 中间按钮操作 -->
          <div class="wlcenter">
            <span class="btnback btnleft hidden"
            @click="wlstatus=0; handleGetLoginCode()" v-if="wlstatus === -1"> &lt; {{$t('wallet.back')}}</span>
            <span class="huo" v-if="wlstatus === 0">{{$t('wallet.or')}}</span>
            <span class="btnback btnright hidden"
            @click="wlstatus=0;walletName=''" v-if="wlstatus === 1"> &lt; {{$t('wallet.back')}}</span>
          </div>
        </div>
      </template>
    </div>
    <span class="bottombg hidden"></span>
    <a href="https://chrome.google.com/webstore/detail/scatter/ammjpmhgckkpcamddpolhchgomcojkle" target="_blank" ref="hasScatter"></a>
    <a href="https://ndi.340wan.com/Scatter_v6.1.7.zip" target="_blank" ref="noScatter"></a>
  </div>
</template>

<script>

import Io from '@/utils/socket';
import { EosModel } from '@/utils/eos/index';
import { WaxModel } from '@/utils/eos/wax';
import { getTimestamp, getUUID, QRcodeCode } from '@/utils/validate';
import { wallets, chainLogo, walletsPlug } from '@/utils/wallet';

export default {
  name: 'WalletLogin',
  data() {
    const dappName = 'Newdex';
    const dappLogo = `${window.location.origin}/static/logoicon.png`;
    // const env = process.env.NODE_ENV;
    const postUrl = `${window.location.origin}/api/wv`;

    return {
      loadingCode: false,
      walletChecked: null, // 当前选中的钱包配置
      SimpleWallet: null, // 公共钱包配置
      checkLoginPost: false, // 开启轮询请求后台
      wallets,
      walletsPlugList: [],
      wlstatus: 0, // 中间按钮操作显示
      walletName: '',
      uuID: '',
      dappName,
      dappLogo,
      postUrl,
      timer: {
        one: null,
        two: null,
      },
      scatterLoginLoading: false, // scatter 登录中
      overdueTimestamp: '', // 二维码过期时间
      overdueCode: false, // 是否过期
      loginCodeThis: null, // 当前钱包项(二维码过期时可使用)
      resetHelpCenter: '',
      clickTrue: false, // 是否点击安装Scatter
      whatUserAgent: 87, // 87是谷歌，其他
      hrefDesktopWallet: {
        'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360028370252-%E6%A1%8C%E9%9D%A2%E9%92%B1%E5%8C%85%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B',
        'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360028370252-%E6%A1%8C%E9%9D%A2%E9%8C%A2%E5%8C%85%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B',
        en: 'https://newdex.zendesk.com/hc/en-us/articles/360028370252-Desktop-Wallet-Tutorial',
        ko: 'https://newdex.zendesk.com/hc/ko/articles/360028370252-Desktop-Wallet-Tutorial'
      },
      hrefTronDesktopWallet: {
        'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360031458931-%E6%A1%8C%E9%9D%A2%E9%92%B1%E5%8C%85%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B-TRON-',
        'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360031458931-%E6%A1%88%E9%A0%AD%E9%8C%A2%E5%8C%85%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B',
        en: 'https://newdex.zendesk.com/hc/en-us/articles/360031458931-Desktop-Wallet-Tutorial-tron-',
        ko: 'https://newdex.zendesk.com/hc/ko/articles/360031458931-Desktop-Wallet-Tutorial-tron-'
      },
      chainValue: '', // 主链选中
      chainIcon: '', // 主链选的icon
      chainOptions: [],

      foWallet: {
        name: 'FO',
        key: 'FO',
        url: '/static/img/wallet/FO.png',
        logo: '/static/img/wallet/w/FO.png',
        download: 'https://wallet.fo/',
        options: {},
        version: '3.0.0.0',
        status: 1,
        active: null,
      }
    };
  },
  props: {
    walletLoginShow: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    isScatter() {
      let back = this.$store.state.app.scatter;
      if (this.$store.state.app.scatter && this.$store.state.app.scatter.identity) {
        back = this.$store.state.app.scatter;
      }
      return back;
    },
  },
  watch: {
    isScatter: function change(newVal) {
      if (newVal.identity) {
        this.handleCloseLoginWallet();
      }
    },
    walletLoginShow: function change(val) {
      if (val) {
        const bychain = sessionStorage.getItem('checkWalletByChain') || 'EOS';
        this.handleCheckChain(bychain);
        this.handleGetLoginCode();
        return;
      }
      this.scatterLoginLoading = false;
      this.checkLoginPost = val;
      this.walletName = '';
      this.wlstatus = 0;
    }
  },
  created() {
    this.handlePushdata();
  },
  mounted() {
    // 是否为火狐浏览器
    if (navigator.userAgent.toUpperCase().indexOf('FIREFOX') !== -1) {
      this.whatUserAgent = 70;
    }
    // SimpleWallet钱包配置
    this.SimpleWallet = {
      protocol: 'SimpleWallet',
      version: '1.0', // SimpleWallet的版本信息，如1.0
      dappName: this.dappName, // Dapp名字
      dappIcon: this.dappLogo, // Dapp图标
      action: 'login', // 赋值为login
      uuID: '', // Dapp server⽣成的，⽤于此次登录验证的唯⼀标识
      loginUrl: this.postUrl, // Dapp server上⽤于登录验证信息的url
      expired: 0, // 二维码过期时间，unix时间戳
      loginMemo: 'The first EOS based decentralized exchange in the world.', // 登录备注信息，钱包用来展示，可选
    }
    let bychain = sessionStorage.getItem('checkWalletByChain') || 'EOS';
    if (this.$appName === 'tronNewdex') {
      bychain = 'TRON';
    }
    this.handleCheckChain(bychain);
  },
  beforeDestroy() {
    if (this.timer.two) {
      clearTimeout(this.timer.two);
    }
    if (this.timer.one) {
      clearTimeout(this.timer.one);
    }
  },
  methods: {
    handlePushdata() {
      this.chainOptions = [ // EOS 主链列表
        {
          value: 'EOS',
          label: 'EOS',
          helpCenter: {
            'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/' +
            '360016322611-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8Scatter%E7%94%B5%E8%84%91%E6%A1%8C%E9%9D%A2%E7%89%88',
            'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/' +
            '360016322611-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8Scatter%E9%9B%BB%E8%85%A6%E6%A1%8C%E9%9D%A2%E7%89%88-',
            en: 'https://newdex.zendesk.com/hc/en-us/articles/360016322611-How-to-Use-Scatter-',
            ko: 'https://newdex.zendesk.com/hc/ko/articles/' +
            '360016322611-Scatter-%EB%8D%B0%EC%8A%A4%ED%81%AC-%ED%86%B1-%EB%B2%84%EC%A0%84%EC%9D%98-%EC%82%AC%EC%9A%A9-%EC%84%A4%EB%AA%85'
          },
        },
        {
          value: 'BOS',
          label: 'BOS',
          helpCenter: {
            'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360022336152-',
            'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360022336152-%E5%A6%82%E4%BD%95%E5%9C%A8Scatter%E4%B8%AD%E9%85%8D%E5%AF%98BOS%E7%B6%B2%E7%B5%A1',
            en: 'https://newdex.zendesk.com/hc/en-us/articles/360022336152-How-to-Configure-BOS-Network-in-Scatter',
            ko: 'https://newdex.zendesk.com/hc/ko/articles/360022336152-How-to-Configure-BOS-Network-in-Scatter',
          },
        },
        {
          value: 'TELOS',
          label: 'TELOS',
          helpCenter: {
            'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360027755432-%E5%A6%82%E4%BD%95%E5%9C%A8Scatter%E4%B8%AD%E9%85%8D%E7%BD%AETELOS%E7%BD%91%E7%BB%9C',
            'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360027755432-%E5%A6%82%E4%BD%95%E5%9C%A8Scatter%E4%B8%AD%E9%85%8D%E5%AF%98TELOS%E7%B6%B2%E7%B5%A1',
            en: 'https://newdex.zendesk.com/hc/en-us/articles/360027755432-How-to-Configure-TEOLS-Network-in-Scatter',
            ko: 'https://newdex.zendesk.com/hc/ko/articles/360027755432-How-to-Configure-TEOLS-Network-in-Scatter'
          },
        },
        {
          value: 'MEETONE',
          label: 'MEETONE',
          helpCenter: {
            'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360024662611-%E5%A6%82%E4%BD%95%E5%9C%A8Scatter%E4%B8%AD%E9%85%8D%E7%BD%AEMEETONE%E7%BD%91%E7%BB%9C',
            'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360024662611-%E5%A6%82%E4%BD%95%E5%9C%A8Scatter%E4%B8%AD%E9%85%8D%E5%AF%98MEET-ONE%E7%B6%B2%E7%B5%A1',
            en: 'https://newdex.zendesk.com/hc/en-us/articles/360024662611-How-to-configure-MEET-ONE-network-in-Scatter',
            ko: 'https://newdex.zendesk.com/hc/ko/articles/360024662611-How-to-configure-MEET-ONE-network-in-Scatter',
          },
        },
        // {
        //   value: 'ENU',
        //   label: 'ENU',
        //   helpCenter: {
        //     'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360024831012-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8IronMan%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8F%92%E4%BB%B6%E7%89%88',
        //     'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360024831012-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8IronMan%E6%B5%81%E8%A6%BD%E5%99%A8%E5%A4%96%E6%8E%9B%E7%A8%8B%E5%BC%8F%E7%89%88',
        //     en: 'https://newdex.zendesk.com/hc/en-us/articles/360024831012-How-to-Use-IronMan-Browser-Extension',
        //     ko: 'https://newdex.zendesk.com/hc/ko/articles/360024831012-How-to-Use-IronMan-Browser-Extension',
        //   },
        // },
        // {
        //   value: 'FIBOS',
        //   label: 'FIBOS',
        //   helpCenter: {
        //     'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360025931151-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8IronMan%E6%B5%8F%E8%A7%88%E5%99%A8%E6%8F%92%E4%BB%B6%E5%AF%BC%E5%85%A5FIBOS%E8%B4%A6%E6%88%B7',
        //     'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360025931151-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8IronMan%E6%B5%81%E8%A6%BD%E5%99%A8%E5%A4%96%E6%8E%9B%E7%A8%8B%E5%BC%8F%E5%B0%8E%E5%85%A5FIBOS%E5%B8%B3%E6%88%B6',
        //     en: 'https://newdex.zendesk.com/hc/en-us/articles/360025931151-How-to-Configure-FIBOS-Network-in-IroMan',
        //     ko: 'https://newdex.zendesk.com/hc/ko/articles/360025931151-How-to-Configure-FIBOS-Network-in-IroMan',
        //   },
        // },
        {
          value: 'WAX',
          label: 'WAX',
          helpCenter: {
            'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360037974631',
            'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360037974631',
            en: 'https://newdex.zendesk.com/hc/en-us/articles/360037974631',
            ko: 'https://newdex.zendesk.com/hc/ko/articles/360037974631'
          },
        },
        {
          value: 'LYNX',
          label: 'LYNX',
          helpCenter: {
            'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360037989492-%E5%A6%82%E4%BD%95%E5%9C%A8Scatter%E4%B8%AD%E9%85%8D%E7%BD%AELYNX%E7%BD%91%E7%BB%9C',
            'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360037989492-%E5%A6%82%E4%BD%95%E5%9C%A8Scatter%E4%B8%AD%E9%85%8D%E5%AF%98LYNX%E7%B6%B2%E7%B5%A1',
            en: 'https://newdex.zendesk.com/hc/en-us/articles/360037989492-How-to-configure-LYNX-network-in-Scatter',
            ko: 'https://newdex.zendesk.com/hc/ko/articles/360037989492-How-to-configure-LYNX-network-in-Scatter'
          },
        },
      ];
      if (this.$appName === 'tronNewdex') {
        this.chainOptions = [ // TRON 主链列表
          {
            value: 'TRON',
            label: 'TRON',
            helpCenter: {
              'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360031458931-%E6%A1%8C%E9%9D%A2%E9%92%B1%E5%8C%85%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B-TRON-',
              'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360031458931-%E6%A1%88%E9%A0%AD%E9%8C%A2%E5%8C%85%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B',
              en: 'https://newdex.zendesk.com/hc/en-us/articles/360031458931-Desktop-Wallet-Tutorial-tron-',
              ko: 'https://newdex.zendesk.com/hc/ko/articles/360031458931-Desktop-Wallet-Tutorial-tron-'
            },
          }
        ]
      }
    },
    handleToScatter(flg) {
      this.clickTrue = true;
      if (flg) {
        this.$refs.hasScatter.click();
        return;
      }
      this.$refs.noScatter.click();
    },

    // scatter 登录
    handleScatterPower() {
      this.scatterLoginLoading = true;
      if (this.$appName === 'tronNewdex') {
        EosModel.getIdentity(this.chainValue, (s) => {
          if (s === 'success') {
            this.handleCloseLoginWallet();
            return;
          }
          this.handleGetIdentityErrorBack(s)
        });
        return;
      }
      if (this.chainValue === 'ENU' || this.chainValue === 'FIBOS') {
        if (EosModel.enuConnected) {
          this.wlstatus = 0;
          this.handleScatterOut();
          return;
        }
        EosModel.enuInit(this, () => {}); // 再次获取enu对象
        this.wlstatus = -1;
        this.scatterLoginLoading = false;
        return;
      }
      // Lynx 桌面版钱包
      // if (this.chainValue === 'LYNX') {
      //   if (EosModel.lynxConnected) {
      //     this.wlstatus = 0;
      //     this.handleScatterOut();
      //     return;
      //   }
      //   EosModel.lynxInit(this, () => {}); // 再次获取enu对象
      //   this.wlstatus = -1;
      //   this.scatterLoginLoading = false;
      //   return;
      // }
      // 是否打开scatter
      const scatterInstall = sessionStorage.getItem('scatterInstall');
      if (scatterInstall === '0') {
        EosModel.scatterInit(this, () => {
          this.wlstatus = 0;
        }); // 再次获取scatter对象
        this.wlstatus = -1;
        this.scatterLoginLoading = false;
        return;
      }
      this.wlstatus = 0;
      this.handleScatterOut();
    },

    // 云钱包登录
    handleCloudWallet() {
      EosModel.chainNodeInit('wax');
      WaxModel.login(() => {});
    },

    // 登录错误回调
    handleGetIdentityErrorBack() {
      this.handleCloseLoginWallet(); // 关闭登录弹出窗
      const route = this.$route;
      if (route && route.meta && route.meta.isUser) {
        this.$router.push('/');
      }
    },

    // 先退出scatter
    handleScatterOut() {
      // 多账户开启
      const isOpenMoreAccount = true;
      if (this.$store.state.app.scatter.scatterFrom === 'leafwallet' && isOpenMoreAccount) {
        EosModel.getIdentity(this.chainValue, (s) => {
          if (s === 'success') {
            this.handleCloseLoginWallet();
            return;
          }
          this.handleGetIdentityErrorBack(s)
        });
      } else {
        EosModel.accountLoginOut(() => {
          EosModel.getIdentity(this.chainValue, (s) => {
            if (s === 'success') {
              this.handleCloseLoginWallet();
              return;
            }
            this.handleGetIdentityErrorBack(s)
          });
        });
      }
      const route = this.$route;
      if (route && route.meta && route.meta.isUser) {
        this.$router.push('/');
      }
    },

    handleGetLoginCode() { // 二维码生成
      this.overdueCode = false;
      this.checkLoginPost = false;
      this.loadingCode = true;
      getTimestamp((timestamp) => {
        this.uuID = `web-${getUUID()}`; // uuID, 1 代表web
        this.overdueTimestamp = timestamp;
        this.SimpleWallet.uuID = this.uuID;
        this.SimpleWallet.expired = Math.floor(this.overdueTimestamp / 1000) + 300;
        const params = JSON.stringify(this.SimpleWallet);
        const canvas = document.getElementById('loginCode');
        if (this.timer.one) {
          clearTimeout(this.timer.one);
        }
        this.timer.one = setTimeout(() => {
          QRcodeCode(params, canvas, 180, (err) => {
            if (err) {
              this.$message.error(this.$t('jy.codeError'));
              return;
            }
            this.checkLoginPost = true;
            if (this.timer.two) {
              clearTimeout(this.timer.two);
            }
            this.handleWalletLogin();
            this.loadingCode = false;
          })
        }, 500);
      })
    },

    // 扫码登录 --- 轮循验证是否登录成功
    handleWalletLogin() {
      const params = {
        uuid: this.uuID,
        timestamp: Math.floor(this.overdueTimestamp / 1000) + 300
      };
      this.$http.post('/account/checkLoginStatus', params).then((res) => {
        if (!res) {
          // 服务端错误，再次请求
          if (this.timer.two) {
            clearTimeout(this.timer.two);
          }
          this.timer.two = setTimeout(() => this.handleWalletLogin(), 1000);
          return;
        }
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        if (res.status === 0 && this.checkLoginPost) {
          // 未有数据回调
          if (this.timer.two) {
            clearTimeout(this.timer.two);
          }
          this.timer.two = setTimeout(() => this.handleWalletLogin(), 1000);
          return;
        }
        if (res.status === 1) {
          // 登录成功
          this.wlstatus = 0;
          this.walletName = '';
          this.$emit('listenWalletLoginClose', false);
          const scatterItem = this.$store.state.app.scatter;
          if (scatterItem.identity) {
            Io.accountOut(scatterItem.identity.accounts[0].name); // ws 账号退出
          }
          if (EosModel.scatter && EosModel.scatter.identity && scatterItem.wallet === 'Scatter') {
            localStorage.setItem('Frontend-Token', '');
            // this.$store.dispatch('setAccountAgree', false);
            EosModel.scatter.forgetIdentity();
          }
          EosModel.chainNodeInit('eos');
          scatterItem.wallet = res.ref || 'wallet';
          scatterItem.by = 'mobileWallet';
          scatterItem.chain = 'eos';
          scatterItem.identity = {
            accounts: [{
              authority: 'active',
              name: res.account,
              blockchain: 'eos',
            }],
          };
          EosModel.accountByScatter = scatterItem.identity.accounts[0];
          localStorage.setItem('Frontend-Token', res.token);
          Io.accountBind(res.account); // ws账号绑定
          this.$store.dispatch('setScatter', scatterItem);
          return;
        }
        if (res.status === 2) {
          // 登录失败
          this.overdueCode = true;
          this.$message.error(this.$t('wallet.loginError'));
        }
        if (res.status === 3) {
          // 登录二维码失效
          this.overdueCode = true;
        }
      });
    },

    // 刷新二维码
    handleNewLoginCode() {
      if (this.overdueCode) {
        this.handleGetLoginCode();
      }
    },

    handleCloseLoginWallet() {
      this.$emit('listenWalletLoginClose', false);
    },

    handleResh() {
      window.location.reload();
    },

    // 主链选择
    handleCheckChain(val) {
      this.chainValue = val;
      this.resetHelpCenter = this.chainOptions.find(v => v.value === val).helpCenter;
      this.scatterLoginLoading = false;
      this.wlstatus = 0;
      sessionStorage.setItem('checkWalletByChain', val);
      this.walletsPlugList = walletsPlug[val] || [];
      if (this.$appName === 'eosNewdex') {
        this.handleGetLoginCode();
      }
    },

    // 链的logo
    chainLogo(val) {
      return chainLogo(val)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

$-clolor: #278eda;
$-clolor2: RGBA(20, 159, 252, 1.00);
$-clolor3: rgb(210,220,234);
.colorThis {
  color: $-clolor !important;
  cursor: pointer;
}

.fontColor {
  color: #333;
  font-size: 15px;
}

.walletLogin {
  position: relative;
  // padding: 20px 0 0;
  padding: 0;

  .chainbox {
    position: absolute;
    top: -20px;
    left: -10px;
    z-index: 999;
    cursor: pointer;

    .changeChain {
      padding-left: 20px;
    }

    .chainSize {
      color: #999;
      display: inline-block;
      vertical-align: middle;
      margin-top: -1px;
    }

    .el-icon--right {
      margin-left: 2px;
    }

    .chain-link {
      min-width: 115px;

      img {
        width: 19px;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 2px;
        margin-left: -1px;
        background: #fff;
        border-radius: 50%;
      }

      span {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }

  .bottombg {
    position: absolute;
    width: 104.5%;
    height: 15px;
    bottom: -30px;
    left: -20px;
    background: $-clolor;
  }
}

.optionChain {
  img {
    width: 19px;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
  }

  span {
    display: inline-block;
    vertical-align: middle;
  }
}

.wlainbox {
  position: relative;
  height: 320px;
  justify-content: space-around;
  // align-items: flex-start;

  .wlleft, .wlright {
    width: 50%;
  }

  .wlleft {
    text-align: center;
  }

  .scatterbox {
    height: 300px;
    // margin-top: 5px;

    .loginCaption {
      margin-top: -17px;
      margin-bottom: 29px;
    }
  }
}

.scatterlogo {
  width: 115px;
  height: 90px;
  margin: 0 auto;
  border-radius: 50%;

  img {
    display: block;
    width: 100%;
    height: 100%;
  }

  i {
    font-size: 90px;
    color: $-clolor2;
  }
}

.supportList {
  padding: 0px 40px 0 40px;

  .supportListImg {
    width: 32px;
    height: 32px;
    margin: 0 20px;

    img {
      width: 100%;
      display: inline-block;
      vertical-align: middle;
    }
  }
}

.default-sty {
  margin: auto;
  border: 1px solid $-clolor;
  color: $-clolor;
  font-weight: normal;
}

.defaultno {
  background: $-clolor;
  color: #fff;
}

.walbtn {
  padding: 0;
  position: relative;
  font-weight: normal;

  img {
    vertical-align: top;
  }

  &:active, &:focus {
    color: #2380c4;
    border-color: #dcdfe6;
    background-color: transparent;
    outline: none;
  }

  &.active {
    color: #2380c4;
    border-color: #beddf4;
    outline: none;
    background-color: #e9f4fb;
  }

  &.nosure:active, &.nosure:focus, &.nosure:hover {
    border-color: #dcdfe6;
    background-color: #fff;
    outline: none;
    cursor: default;
  }

  .tiob {
    position: absolute;
    font-size: 12px;
    right: 0;
    bottom: 0;
    border-top-left-radius: 8px;
    border-bottom-right-radius: 3px;
    background: RGBA(176, 176, 176, 0.8);
    color: #fff;
    padding: 4px 2px;

    &.tiobActive {
      background: RGBA(254, 80, 49, 0.8)
    }
  }
}

.btnbig {
  padding: 14px 20px;
  margin: 20px 0 5px;
}

.tilist {
  p {
    position: relative;
    padding-right: 30px;
    min-height: 25px;
    padding-left: 10px;
    text-align: left;
    color: #999;

    i {
      top: 8px;
      left: 0;
      position: absolute;
      display: inline-block;
      color: $-clolor;
      background: $-clolor;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      vertical-align: middle;
      margin-top: -1px;
      margin-right: 5px;
    }
  }
}

.wlright {
  h2 {
    font-size: 16px;
    text-align: center;
    margin: 0 0 30px 0;
    color: #333;
    font-weight: normal;
  }
}

.walletList {
  width: 440px;
  margin: 0px 0 0 25px;
}
.el-icon-more {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: $-clolor3;
  border-radius: 50%;
  margin: 0 6px;
  color: $-clolor3;
  cursor: pointer;
  &:hover {
    color: $-clolor;
    border-color: $-clolor;
  }
}
// 每个宽度44px
.wlistbox {
  justify-content: center;
  flex-wrap: wrap;
  width: 440px;
  margin: 0 auto -5px;
  button {
    margin-bottom: 20px;
    margin-left: 0;
  }
  i {
    font-size: 22px;
  }
  .walletitem {
    width: 32px;
    height: 32px;
    margin: 0 6px 10px;
    cursor: pointer;

    img {
      vertical-align: top;
      width: 100%;
    }
  }
}
.wlcenter {
  position: absolute;
  height: 100%;
  width: 60px;
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
  z-index: 9;

  .huo {
    width: 40px;
    position: absolute;
    padding: 10px;
    left: 50%;
    top: 50%;
    transform: translate3D(-50%, -50%, 0);
    background: #fff;
    z-index: 9;
    color: #999;
    text-align: center;
  }

  .btnback {
    width: 83px;
    position: absolute;
    text-align: center;
    top: 1px;
    color: #666;
    z-index: 9;
    cursor: pointer;
    font-size: 16px;
    top: -15px;

    &:hover {
      color: $-clolor;
    }
  }

  .btnleft {
    left: 40px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .btnright {
    left: -420px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  &::after {
    content: ' ';
    background: #dedede;
    width: 1px;
    height: 100%;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 8;
  }
}

.fontcolor3 {
  color: #333 !important;
}
.fontcolor6 {
  color: #666 !important;
}
.fontcolor9 {
  color: #999 !important;
}
.walletCode {
  min-height: 214px;
  text-align: center;

  .codebox {
    position: relative;
    width: 180px;
    height: 180px;
    margin: auto;

    .canvasbox {
      width: 100%;
    }

    .logocode {
      padding: 2px;
      position: absolute;
      width: 26px;
      height: 26px;
      left: 50%;
      top: 50%;
      border-radius: 5px;
      background: #fff;
      transform:translate3D(-50%, -50%, 0);
    }

    .overdueCode {
      background: rgba(255, 255, 255, .9);
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;

      span {
        min-width: 100%;
      }

      a {
        display: block;
      }
    }
  }

  p {
    color: #999;
    padding: 10px 0;
  }

  a {
    color: $-clolor
  }

  .activebox {
    font-size: 12px;
    display: inline-block;
    padding: 6px 20px;
    border-radius: 20px;
    margin: 10px 0 0;
    background: RGBA(255, 239, 239, 1.00);
    color: RGBA(255, 70, 70, 1.00);
  }
}

.scatteranz {
  margin: -10px 0 0 0;

  p {
    color: #666;
    font-size: 12px;
    padding: 5px 0;
  }

  .ansuces {
    display: inline-block;
    float: right;
    cursor: pointer;
    color: $-clolor;
    margin-top: 25px;
    margin-right: 65px;
  }
}
.walletmain {
  position: relative;
  padding: 13px 0 0 0;
  .el-tooltip {
    display:inline-block;
    height: 32px;
    margin: 0 0 13px 12px;
    cursor:pointer;
  }
  img {
    vertical-align: top;
  }
  .walletlayer {
    position: absolute;
    top: -1px;
    right: -10px;
    width: 11px;
    height: calc(100% + 2px);
    background: #fff;
    box-shadow: 5px 0px 8px -4px rgba(0, 0, 0, 0.1);
    border-radius: 0 4px 4px 0;
    border: 1px solid #ebeef5;
    border-left: none;
  }
}
// bos登录不能扫码蒙版
/deep/ .payMask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  z-index: 100;
  div {
    font-size: 14px;

    p {
      padding: 0;
      margin-bottom: 10px;
      color: #333;
    }
  }
}
// 波场样式
.tronLoginClass {
  .wlleft {
    width: 100%;
  }
}
.theme-1B1D27{
  .fontColor {
    color: rgba(255, 255, 255, 0.8);
  }
  .btnbig {
    border-color: #4e5b85;
    background: transparent;
    &:hover {
      color: white;
      background: #278EDA;
    }
  }
  .wlright {
    h2 {
      color: #fff;
    }
  }

  .scatteranz {
    p {
      color: #fff;
    }
  }

  .tilist {
    p {
      color: rgba(255, 255, 255, 0.8);
      i {
      }
    }
  }

  .wlcenter {
    .huo {
      background: RGBA(33, 42, 63, 1);
      color: rgba(255, 255, 255, 0.8);
    }

    .btnback {
      color: rgba(255, 255, 255, 0.8);

      &:hover {
        color: $-clolor;
      }
    }

    &::after {
      background: #dedede;
    }
  }

  .fontcolor6, .fontcolor3, .fontcolor9 {
    color: rgba(255, 255, 255, 0.8) !important;
  }
}
</style>
